<template>
  <div
    id="sidebar"
    class="fixed z-40 inset-0 flex-none h-full bg-black bg-opacity-25 w-full lg:bg-white lg:static lg:h-auto lg:overflow-y-visible lg:pt-0 lg:w-60 xl:w-72 lg:block"
    :class="{ hidden: !sidebarHidden }"
  >
    <div
      id="navWrapper"
      class="h-full overflow-y-auto scrolling-touch lg:h-auto lg:block lg:sticky lg:bg-transparent overflow-hidden lg:top-18 bg-white mr-24 lg:mr-0"
    >
      <div
        class="hidden lg:block h-12 pointer-events-none absolute inset-x-0 z-10 bg-gradient-to-b from-white"
      ></div>
      <nav
        id="nav"
        class="px-1 pt-6 overflow-y-auto font-medium text-base sm:px-3 xl:px-5 lg:text-sm pb-10 lg:pt-10 lg:pb-14 sticky?lg:h-(screen-18)"
      >
        <div class="relative flex mb-8 px-3 lg:hidden">
          <form class="relative">
            <label
              ><span class="sr-only"
                ><font style="vertical-align: inherit"
                  ><font style="vertical-align: inherit">Tailwind CSS版本</font></font
                ></span
              ><select
                class="appearance-none block bg-transparent pr-7 py-1 text-gray-500 font-medium text-sm focus:outline-none focus:text-gray-900 transition-colors duration-200"
              >
                <option value="v2">
                  <font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">v </font></font
                  ><!-- --><font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">2.0.2</font></font
                  >
                </option>
                <option value="v1">
                  <font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">v1.9.6</font></font
                  >
                </option>
                <option value="v0">
                  <font style="vertical-align: inherit"
                    ><font style="vertical-align: inherit">v0.7.4</font></font
                  >
                </option>
              </select></label
            ><svg
              class="w-5 h-5 text-gray-400 absolute top-1/2 right-0 -mt-2.5 pointer-events-none"
              fill="currentColor"
            >
              <path
                fill-rule="evenodd"
                clip-rule="evenodd"
                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              ></path>
            </svg>
          </form>
        </div>
        <!-- toc -->
        <ul>
          <li v-for="(item1, i1) in aSidebar" :key="i1">
            <template v-if="item1.children">
              <h5
                class="px-3 mb-3 lg:mb-3 uppercase tracking-wide font-semibold text-sm lg:text-xs text-gray-900"
              >
                <font style="vertical-align: inherit"
                  ><font style="vertical-align: inherit">{{item1.name}}</font></font
                >
              </h5>
              <ul>
                <li v-for="(item2, i2) in item1.children" :key="i1+'-'+i2">
                  <a
                    class="px-3 py-2 transition-colors duration-200 relative block rounded text-gray-500 hover:text-gray-700 hover:bg-gray-100"
                    :href="item2.href"
                    ><span class="rounded-md absolute inset-0 bg-cyan-50 opacity-0"></span
                    ><span class="relative"
                      ><font style="vertical-align: inherit"
                        ><font style="vertical-align: inherit">{{item2.name}}</font></font
                      ></span
                    ></a
                  >
                </li>
              </ul>
            </template>
            <a
              v-else
              :href="item1.href"
              class="flex items-center px-3 transition-colors duration-200 mb-4 rounded text-gray-600 hover:text-gray-900 hover:bg-gray-100"
              ><div class="mr-3 rounded-md bg-gradient-to-br from-pink-500 to-rose-500">
                <svg class="h-6 w-6" viewBox="0 0 24 24">
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M9 6C10.0929 6 11.1175 6.29218 12 6.80269V16.8027C11.1175 16.2922 10.0929 16 9 16C7.90714 16 6.88252 16.2922 6 16.8027V6.80269C6.88252 6.29218 7.90714 6 9 6Z"
                    fill="#FFF1F2"
                  ></path>
                  <path
                    fill-rule="evenodd"
                    clip-rule="evenodd"
                    d="M15 6C16.0929 6 17.1175 6.29218 18 6.80269V16.8027C17.1175 16.2922 16.0929 16 15 16C13.9071 16 12.8825 16.2922 12 16.8027V6.80269C12.8825 6.29218 13.9071 6 15 6Z"
                    fill="#FECDD3"
                  ></path>
                </svg>
              </div>
              <font style="vertical-align: inherit"
                ><font style="vertical-align: inherit">{{ item1.name }}</font></font
              ></a
            >
          </li>
        </ul>
      </nav>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "tv-sidebar",
  props: {
    sidebarHidden: {
      type: Boolean,
      required: true,
    },
  },
  setup() {
    const aSidebar = [
      {
        href: "/docs",
        // flex items-center px-3 hover:text-gray-900 transition-colors duration-200 mb-4 【text-gray-900
        // mr-3 rounded-md bg-gradient-to-br 【from-pink-500 to-rose-500
        svg: null,
        name: "文献资料",
      },
      {
        href: "https://tailwindui.com/components",
        svg: null,
        name: "组件"
      },
      {
        name: "入门",
        children: [
          {
            href: "/docs/installation",
            name: "安装",
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
          {
            href: "/docs/installation",
            name: "发行说明"
          },
        ],
      },
    ];
    return { aSidebar };
  },
});
</script>

<style></style>
